<template>
  <div class="order-management">
    <div class="top-card box" v-if="goods">
      <div class="card">
        <el-card class="box-card" >
          <el-row>
            <el-col :span="6">订单编号: {{goods.id}}</el-col>
            <el-col :span="6">运单编号: -- </el-col>
            <el-col :span="6">下单时间: {{goods.createTime}}</el-col>
            <el-col :span="6">订单状态: {{statusmap.get(goods.status)}}</el-col>
            
          </el-row>
          <el-row>
            <el-col :span="6">预计到达日期: {{goods.estimatedArrivalTime}}</el-col>
          </el-row>
        </el-card>
      </div>

      <div class="collapse">
        <el-collapse>
          <el-collapse-item title="基本信息">
            <el-timeline>
              <el-timeline-item
              icon="el-icon-more"
              >发货方
                <el-row>
                  <el-col :span="6">发货方姓名: {{goods.senderName}}</el-col>
                  <el-col :span="6">发货方电话: {{goods.senderPhone}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">发货方地址: {{goods.senderCity.name}}{{goods.senderProvince.name}}{{goods.senderCounty.name}}</el-col>
                  <el-col :span="6">详细地址: {{goods.senderAddress}}</el-col>
               </el-row>
              </el-timeline-item>
              </el-timeline>
            <el-timeline>
              <el-timeline-item
                icon="el-icon-more"
              >收货方
                <el-row>
                  <el-col :span="6">收获方姓名: {{goods.receiverName}}</el-col>
                  <el-col :span="6">收获方电话: {{goods.receiverPhone}}</el-col>
                </el-row>
                <el-row>
                 <el-col :span="6">收获方地址: {{goods.receiverProvince.name}}{{goods.receiverCity.name}}{{goods.receiverCounty.name}}</el-col>
                  <el-col :span="6">详细地址: {{goods.receiverAddress}}</el-col>
               </el-row>
              </el-timeline-item>
            </el-timeline>

            <el-timeline>
              <el-timeline-item
                icon="el-icon-more"
              >距离: {{goods.distance}}km
                <el-row>
                  <el-col :span="6">备注: {{goods.mark === null?'暂无':''}}</el-col>
                </el-row>
                
              </el-timeline-item>
            </el-timeline>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="collapse qujian">
        <el-collapse accordion >
          <el-collapse-item title="取件信息">
            <el-row>
            <el-col :span="6">所在网点: {{goods.taskPickup.agency.name}}</el-col>
            <el-col :span="6">取件类型: {{goods.pickupType===1?'网点自寄':'上门取件'}} </el-col>
            <el-col :span="6">作业状态: 
                {{goods.taskPickup.status===1?'新任务':goods.taskPickup.status===2?'已完成':'已取消'}}</el-col>
            <el-col :span="6">取件快递员: {{goods.taskPickup.courier.name}}</el-col>
            
          </el-row>
          <el-row>
            <el-col :span="6">快递员电话: {{goods.taskPickup.courier.mobile}}</el-col>
            <el-col :span="6">预计取件时间: {{goods.taskPickup.estimatedStartTime}}</el-col>
            <el-col :span="6">取件完成时间: {{goods.taskPickup.estimatedStartTime}}</el-col>
          </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="collapse feiyon">
        <el-collapse accordion >
          <el-collapse-item title="费用信息">
         <el-row>
            <el-col :span="6">运费: {{goods.amount}}</el-col> 
            <el-col :span="6">支付方式: {{goods.paymentMethod===1?'预结': goods.paymentMethod === 2?'到付':''}}</el-col>  
            <el-col :span="6">付款状态: {{goods.paymentStatus===1?'未付': goods.paymentMethod === 2?'已付':''}}</el-col>            
          </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="collapse">
        <el-collapse >
          <el-collapse-item title="货品信息">
            <el-table v-if="foodtable" :data="foodtable" style="width: 100%" show-summary>
              <el-table-column type="index" label="序号" style="width: 100"/>
              <el-table-column prop="name" label="货品名称" width="180">
                <template v-slot="{ row }">
                <!-- 条件判断 -->
                <el-input v-if="row.isEdit" v-model="row.name" size="mini" />
                <span v-else>{{ row.name }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="goodsType.name" label="货品类型" width="180">
                <template v-slot="{ row }">
                <!-- 条件判断 -->
                <el-input v-if="row.isEdit" v-model="row.goodsType.name" size="mini" />
                <span v-else>{{ row.goodsType.name }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="totalVolume" label="重量(千克)">
                <template v-slot="{ row }">
                <!-- 条件判断 -->
                <el-input v-if="row.isEdit" v-model="row.totalVolume" size="mini" />
                <span v-else>{{ row.totalVolume }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="totalWeight" label="体积(立方)">
                <template v-slot="{ row }">
                <!-- 条件判断 -->
                <el-input v-if="row.isEdit" v-model="row.totalWeight" size="mini" />
                <span v-else>{{ row.totalWeight }}</span>
                </template>
              </el-table-column>

          <el-table-column align="center" label="操作">
             <template v-slot="{ row }">
               <template v-if="row.isEdit">
              <!-- 编辑状态 -->
              <el-button type="primary" size="mini" @click="btnEditOK(row)">确定</el-button>
              <el-button size="mini" @click="btnRowCancel(row)">取消</el-button>
              </template>
            <template v-else>
              <!-- 非编辑状态 -->
              <el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button>
              <el-button size="mini" type="text" @click="deltorder(row.id)">删除</el-button>
            </template>
          </template>
          </el-table-column>
              <!-- <el-table-column label="操作">
                  <el-button size="mini" @click="btnEditRow(row)">编辑</el-button>
                  <el-button size="mini">删除</el-button>
              </el-table-column> -->
            </el-table>

          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import {gettorderDetail ,updatetorder,deltorder} from "@/api/ordermanage";
export default {
  data() {
    return {
        // 订单状态列表
      statusmap: new Map([
        [22000, '已关闭'],
        [23000, '待取件'],
        [23001, '已取件'],
        [23002, '网点自寄'],
        [23003, '网点入库'],
        [23004, '待装车'],
        [23005, '运输中'],
        [23006, '网点出库'],
        [23007, '待派送'],
        [23008, '派送中'],
        [23009, '已签收'],
        [23010, '拒收'],
        [230011, '已取消']
      ]),
      activities: [
        {
          content: "发货方",
          // timestamp: '2018-04-12 20:46',
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "收货方",
          // timestamp: '2018-04-03 20:46',
          color: "#0bbd87",
          icon: "el-icon-more",
        },
      ],
    goods:null, //1、2、3、4列表
    foodtable:null,
    goodsTypename:{}
    };
  },
  created() {
    this.gettorderDetail()
  },
  methods: {
    async gettorderDetail(){
        const id = this.$route.params.id
        const res = await gettorderDetail(id)
        this.goods = res.data
        this.foodtable = res.data.orderCargoDTOS.map(v=>({...v,isEdit:false, rowEdit:{ name: v.name,totalVolume: v.totalVolume,totalWeight: v.totalWeight }}))
        // if(this.foodtable) console.log(this.foodtable[0].goodsType.name);
        if(this.foodtable[0].goodsType) 
        this.goodsTypename = this.foodtable[0].goodsType.name
        // .map(v=>({...v,isEdit:false, rowEdit:{ name: v.name, totalVolume: v.totalVolume,totalWeight: v.totalWeight, goodsTypename: { name: v.goodsType.name }}}))
        
        // console.log(goodsTypename);
        
    },
    // 点击编辑行
    btnEditRow(row) {
      row.isEdit = true // 改变行的编辑状态
      console.log('111');
    },
    // 点击 行内编辑 取消
    btnRowCancel(row) {
      row.isEdit = false // 关闭编辑状态
      // 还原 数据
      row.name = row.rowEdit.name
      row.totalVolume = row.rowEdit.totalVolume
      row.totalWeight = row.rowEdit.totalWeight
      // console.log(this.goodsTypename);
      row.goodsType.name = this.goodsTypename
    },
        // 点击 行内编辑 确认
    async btnEditOK(row){
      // 名称和描述不能为空
      if(!row.name || !row.totalVolume || !row.totalWeight){
        // console.log('啊啊啊啊');
        this.$message.warning('角色名称和描述不能为空')
        return
      }
      // 发送请求
     const aaa= await updatetorder({id:row.id,totalVolume:row.totalVolume,name:row.name,totalWeight:row.totalWeight,goodsTypename:row.goodsType.name})
     console.log(aaa);
      // 提示成功
      this.$message.success('编辑角色成功')
      // 更新页面
      this.gettorderDetail()

      // 对象合并  给对象增加属性 row.rowEdit
      Object.assign(row.rowEdit, { name: row.name,totalVolume: row.totalVolume,totalWeight: row.totalWeight })
      Object.assign(row, { isEdit: false })
    },
    async deltorder(id){
       console.log(id);
       await this.$confirm('您确定删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          // 发送请求 完成删除
        })
       await deltorder(id)
       this.$message.success('删除成功')
       this.gettorderDetail()
    }
     
  }
};
</script>

<style lang="scss" scoped>
.order-management {
  padding: 0 20px;
  margin-top: 20px;
}
.top-card {
  // height: 142px;
  margin-bottom: 15px;
  .box-card{

    .el-row {
    // margin-bottom: 20px;
    margin-top: 20px;
  }
  ::v-deep .el-cor{
      margin-right: 20px;
    }
  }

  .el-row {
    margin-top: 5px;
    margin-bottom: 20px;
  }

  .collapse {
    margin-bottom: 15px;
    // font-size: 25px;
    // height: 300px;
    ::v-deep .el-collapse-item__header {
      background-color: rgb(184, 186, 189);
      font-size: 18px;
      padding-left: 10px;
      box-shadow: 1px 3px 2px 1px rgb(150, 153, 153);
      
    }
    ::v-deep .el-collapse-item__content {
      font-size: 16px;
      margin-left: 15px;
      padding-left: 10px;
    }
    ::v-deep .el-collapse-item__content:nth-child(1) {
      margin-top: 30px;
    }
    .el-timeline{
      margin-top: 20px;
      font-size: 15px;
    }
    .el-steps{
      margin-top: 20px;
      margin-left: 60px;
      // text-align: center;
    }
    ::v-deep .el-table th > .cell{
        text-align: center;
    }
    ::v-deep .el-table .cell{
        text-align: center;
    }
  }
  .card {
    margin-bottom: 15px;
    // height: 200px;
  }
}

.box {
  box-sizing: border-box;
  padding: 20px;
//   background-color: pink;
  border-radius: 10px;
  min-height: 50px;
}
</style>